<template>
	<view>
		<view class="top_view">
			<view class="padding-lr padding-top-sm bg  ">
				<u-search class="flex-sub" placeholder="请输入技师电话或名字" :focus="false" shape="square"
					v-model="artificerName" :show-action="true" :animation="true" bg-color="#F7F7F7" color="#1A1A1A"
					@search="getSearch()" action-text="搜索" @custom="getSearch()"></u-search>
			</view>
		</view>
		<view style="margin-top: 130rpx;" v-if="list.length > 0">
			<view class="listbox" v-for="(item,index) in list" :key="index">
				<image :src="item.artificerImg?item.artificerImg:'../../static/logo.png'"></image>
				<view class="listbox_right">
					<view class="righthead">
						<view class="flex align-center">
							<view class="title">{{item.artificerName}}</view>
							<view @click="bindphone(item.phone)">
								<image src="../../static/images/phone.png"></image>
							</view>
						</view>
						<view class="data">{{item.createTime}}</view>
					</view>
					<view class="rightadd" @click="openMap(item)">
						<image src="../../static/images/address.png"></image>
						{{item.address}}
					</view>
				</view>
			</view>
		</view>
		<empty v-if="list.length==0" content="暂无记录"></empty>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				artificerName: '',
				consortiaId: '',
				page: 1,
				limit: 10,
				list: [],
				count: 0,
				byuserId: ''
			}
		},
		onLoad(option) {
			if (option.consortiaId) {
				this.consortiaId = option.consortiaId
				this.getqiandao()
			} else {
				this.byuserId = option.userId
				this.getqiandao()
			}

		},
		methods: {
			//技师位置
			openMap(item) {
				let that = this
				uni.openLocation({
					latitude: item.latitude - 0, //要去的纬度-地址       
					longitude: item.longitude - 0, //要去的经度-地址
					// name: item.name, //地址名称
					address: item.address, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', phone);
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			getSearch(){
				this.page = 1;
				this.getqiandao();
			},
			getqiandao() {
				this.$queue.showLoading('加载中...')
				let data = {
					page: this.page,
					limit: this.limit,
					consortiaId: this.consortiaId,
					artificerName: this.artificerName,
					userId: this.byuserId
				}
				this.$Request.getT("/app/message/selectSignList", data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list]
						}
						this.count = res.data.totalCount
						uni.stopPullDownRefresh();
					}
				});
			}
		},
		onReachBottom: function() {
			if (this.count == this.list.length) {
				uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				})
				return
			} else {
				this.page = this.page + 1;
				this.getqiandao()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getqiandao()
		},
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.top_view {
		position: fixed;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 0rpx;
		/* #endif */
		z-index: 999;
		width: 100%;
		padding-bottom: 20rpx;
		background: #ffffff;
	}

	.listbox {
		background: #FFFFFF;
		margin: 30rpx 20rpx;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.listbox_right {
			margin-left: 20rpx;
			width: 82%;

			.righthead {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 30rpx;
					font-weight: bold;
				}

				image {
					width: 26rpx;
					height: 27rpx;
					margin-left: 8rpx;
				}

				.data {
					color: #999999;
				}

			}

			.rightadd {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-top: 10rpx;

				image {
					width: 24rpx;
					height: 30rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>